<template>
  <div class="center">
    <div class="title">个人中心</div>
    <div class="center-box">
      <el-container>
        <el-aside width="150px">
          <el-menu
            :default-active="active"
            class="el-menu-vertical-demo"
            router
          >
            <el-menu-item
              v-for="(item, index) in menuList"
              :key="index"
              :index="item.path"
              @click="savePath(item.path)"
            >
              <template #title>
                <component :is="item.icons?.icon" class="icon"></component>
                <span>{{ item.title }}</span>
              </template>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main><router-view></router-view></el-main>
      </el-container>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
const active = ref("");
const menuList = reactive([
  {
    id: 1,
    title: "我的信息",
    icons: { icon: "HomeFilled" },
    path: "/center/info",
  },
  {
    id: 2,
    title: "我的头像",
    icons: { icon: "Avatar" },
    path: "/center/image",
  },
  {
    id: 3,
    title: "密码管理",
    icons: { icon: "Opportunity" },
    path: "/center/password",
  },
  {
    id: 4,
    title: "我的评论",
    icons: { icon: "Comment" },
    path: "/center/comment",
  },

  {
    id: 5,
    title: "信息登记",
    icons: { icon: "Grid" },
    path: "/center/loserInfo",
  },
  {
    id: 6,
    title: "志愿者申请",
    icons: { icon: "Grid" },
    path: "/center/volReg",
  },
]);
onMounted(() => {
  active.value = window.sessionStorage.getItem("path") || active.value;
});
// 保持导航活跃状态
const savePath = (activePath: any) => {
  active.value = activePath;
  window.sessionStorage.setItem("path", activePath);
};
</script>

<style lang="less" scoped>
.center {
  width: 80%;
  height: 80%;
  margin: 100px auto;
  display: flex;
  flex-direction: column;
  border: 1px solid rgb(225, 223, 223);
  border-radius: 5px;
  box-shadow: 0 0 5px 5px #f3f4f6;
  .title {
    border-bottom: 1px solid #e5e7eb;
    line-height: 60px;
    font-size: 24px;
    text-align: center;
    height: 60px;
  }
  &-box {
    flex: 1;
    overflow-y: auto;
    .el-container {
      height: 100%;
      .el-main {
        background-color: #f3f4f6;
      }
      .icon {
        height: 20px;
        width: 20px;
        margin-right: 5px;
      }
    }
  }
}
</style>
